<!DOCTYPE html>
<html>
  <head>
    <script src="jquery.js" type="text/javascript"></script> 
    <script src="jquery-ui.min.js" type="text/javascript"></script> 
    <link href="jquery-ui.css" rel="stylesheet" type="text/css" />

    <style>
        #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
        #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
    </style>
    <script>
        $(function() {
            $( "#draggable" ).draggable();
            $( "#droppable" ).droppable({
                drop: function( event, ui ) {
                    $( this )
                        .addClass( "ui-state-highlight" )
                        .find( "p" )
                            .html( "Dropped!" );
                }
            });
        });
    </script>
  </head>
  <body>
    <div class="demo">
        <div id="draggable" class="ui-widget-content">
            <p>Drag me to my target</p>
        </div>
        <div id="droppable" class="ui-widget-header">
            <p>Drop here</p>
        </div>
    </div>
    <div class="demo-description" style="display: none; ">
        <p>Enable any DOM element to be droppable, a target for draggable elements.</p>
    </div>
  </body>
</html>
